import React from 'react'
import { Form, Input, Select, Button, message } from 'antd';
import '../../OrderMag/index.css'
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import { aUrl } from '../../../../static/axios_url';
export default function ShippAdd(props) {
    let navigate = useNavigate();
    //收货人信息表单信息
    const { Option } = Select;
    function onFinish(values) {
        // console.log(values);
        axios.post(aUrl + '/shopcar/addSite', {
            name: values.name,
            area: values.area1 + ' ' + values.area2 + ' ' + values.area3,
            site: values.site,
            phone: values.phone,
            u_id: 1,
            muo: 0,
        }).then(res => {
            if (res.data.code === 1) {
                message.success('添加成功')
                //接收父组件传过来的go参数 判断是那个组件在添加地址 结束后返回本页面
                if (props.go === 'jfshop') {
                    navigate('/jfshop')
                }
                if (props.go === 'ordermag') {
                    navigate('/shop/ordermag/shippmag');
                }
                if (props.go === 'addsite') {
                    navigate('/mycenter/mysite');
                }

            }
        })
    };
    function goshippmag() {

    }
    return (
        <div>
            <h3 className='om-h3'>收货人信息</h3>
            {/* 收货人信息 */}
            <Form name="complex-form" onFinish={onFinish} labelCol={{ span: 2 }} style={{ width: 1278, marginTop: 10, marginBottom: 20, paddingTop: 20, borderTop: '1px solid #E9E9E9' }} >            {/* labelCol：label标签大小  colon：控制冒号是否显示 */}
                <Form.Item name="name" label="收货人姓名" rules={[{ required: true, message: '请输入姓名' }]}>
                    <Input style={{ width: 331, height: 35 }} placeholder="请输入姓名" />
                </Form.Item>

                <Form.Item label="所在地区" style={{ marginBottom: -30 }}>
                    <Input.Group compact>
                        <Form.Item name="area1" noStyle rules={[{ required: true }]}>
                            <Select style={{ width: 140, height: 35, marginRight: 20 }} placeholder="选择地区">
                                <Option value="北京">北京</Option>
                                <Option value="上海">上海</Option>
                                <Option value="杭州">杭州</Option>
                                <Option value="深圳">深圳</Option>
                            </Select>
                        </Form.Item>
                    </Input.Group>
                    <Input.Group compact>
                        <Form.Item name="area2" noStyle rules={[{ required: true }]}>
                            <Select style={{ width: 140, height: 35, margin: '-35px 0 0 150px' }} placeholder="选择地区">
                                <Option value="海淀区">海淀区</Option>
                                <Option value="朝阳区">朝阳区</Option>
                                <Option value="西城区">西城区</Option>
                            </Select>
                        </Form.Item>
                    </Input.Group>
                    <Input.Group compact>
                        <Form.Item name="area3" noStyle rules={[{ required: true }]}>
                            <Select style={{ width: 140, height: 35, margin: '-57px 0 0 300px' }} placeholder="选择地区">
                                <Option value="海淀">海淀区</Option>
                                <Option value="朝阳">朝阳区</Option>
                                <Option value="西城">西城区</Option>
                            </Select>
                        </Form.Item>
                    </Input.Group>
                </Form.Item>

                <Form.Item name="site" label="详细地址" rules={[{ required: true, message: '请输入地址' }]}>
                    <Input style={{ width: 460, height: 35 }} placeholder="用于接收货物的详细地址" />
                </Form.Item>

                <Form.Item name="phone" label="联系电话" rules={[{ required: true, message: '请输入手机号' }]}>
                    <Input style={{ width: 152, height: 35 }} placeholder="推荐使用手机号" />
                </Form.Item>

                <Form.Item name="bbb" label="或固定电话" style={{ marginTop: -60, marginLeft: 270 }}>
                    <Input style={{ width: 55, height: 35 }} placeholder="区号" />
                </Form.Item>

                <Form.Item name="aaa" label="-" labelCol={{ span: 1 }} colon={false} style={{ marginTop: -60, marginLeft: 400 }}>
                    <Input style={{ width: 125, height: 35 }} placeholder="电话号码" />
                </Form.Item>

                <Form.Item label=" " colon={false}>
                    <Button type="primary" htmlType="submit" style={{ width: 205, height: 40, backgroundColor: '#F08200', borderRadius: 5, border: 'none' }} onClick={goshippmag}>
                        确认并设为默认地址
                    </Button>
                </Form.Item>
            </Form>
        </div>
    )
}
